import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import {getTemplates, getTypes, storeTemplate} from "../../../../../../redux/actions/eventDetail/tabCosts";
import {Button, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row} from "reactstrap";
import {SET_COST_FIELD} from "../../../../../../redux/constants/eventDetail/tabCosts";
import {setFieldData} from "../../../../../../redux/actions/helper";
import {ChevronDown} from "react-feather";
import Template from "./Template";
import Select from "react-select";

const TabCosts = props => {
  const {templates, params} = props
  const {getTemplates, setFieldData, getTypes, storeTemplate} = props
  const [collapsed, setCollapsed] = useState(false)
  useEffect(() => {
    if (!params.isCost) {
      getTemplates(params.template_id)
    }
    getTypes()
    return () => {
      setFieldData(SET_COST_FIELD, 'items', [])
    }
  }, [params.isCost]);

  const AddTemplate = (props) => {
    const [nameValid, setNameValid] = useState(false)
    const [name, setName] = useState('')

    const Store = () => {
      if (name) {
        storeTemplate({name});
      } else {
        setNameValid(true)
      }
    }

    return <Modal
      isOpen={params.isAddTemplate}
      toggle={() => setFieldData(SET_COST_FIELD, 'params', {...params, isAddTemplate: false})}
      size="sm"
    >
      <ModalHeader
        toggle={() => setFieldData(SET_COST_FIELD, 'params', {...params, isAddTemplate: false})}>
        Добавление шаблона
      </ModalHeader>
      <ModalBody>
        <div className="w-100">
          <Row>
            <Col className="align-self-center mt-1">
              <label htmlFor="name">Название</label>
              <input placeholder={'Введите название'}
                     id="name"
                     onChange={e => {
                       setNameValid(false)
                       setName(e.target.value)
                     }}
                     value={name || ''}
                     className={`cost-item cost-item-input ${nameValid ? 'custom-input-invalid' : ''}`}/>
            </Col>
          </Row>
        </div>
      </ModalBody>
      <ModalFooter>
        <Button.Ripple
          color="primary"
          className="btn-uppercase"
          onClick={() => Store()}
        >
          Добавить
        </Button.Ripple>
      </ModalFooter>
    </Modal>
  }

  return (
    <>
      <div className="tab-costs-content flex-grow-1 d-flex flex-column justify-content-between h-100 costs-templates">
        <AddTemplate/>
        <div className="d-flex flex-wrap justify-content-between costs-template">
          <div className="mt-1 mr-0 mr-sm-1">
            {
              params.template_id && <Button.Ripple
                color="danger"
                className="btn-uppercase add-template"
                onClick={() => setFieldData(SET_COST_FIELD, 'params', {
                  ...params,
                  cost_id: null,
                  isOpenModal: true,
                  isCost: false
                })}
              >
                Добавить пункт
              </Button.Ripple>
            }

            <div>
              {
                params.template_id && <Template templateId={params.template_id}/>
              }
            </div>
          </div>
          <div className="templates-list d-flex flex-column">
            <div
              onClick={() => setCollapsed(!collapsed)}
              className="select-template d-flex justify-content-between align-items-end">
              <p>Шаблоны</p>
              <ChevronDown color="#fff"/>
            </div>
            <div
              className={`templates-list-items ${(collapsed || (collapsed && templates.length)) && 'templates-list-items-collapsed'}`}>
              {
                templates && templates.map(value => {
                  return <div key={value.id}
                              className={`templates-list__item ${value.id === params.template_id ? 'selected' : ''}`}
                              onClick={() => setFieldData(SET_COST_FIELD, 'params', {...params, template_id: value.id})}
                  >
                    <p>{value.name}</p>
                  </div>
                })
              }
            </div>
            <div className="add-template p-1 d-flex justify-content-center w-100">
              <Button.Ripple
                color="primary"
                onClick={() => setFieldData(SET_COST_FIELD, 'params', {...params, isAddTemplate: true})}
              >
                Cоздать
              </Button.Ripple>
            </div>
          </div>
        </div>
        <div className="mt-2 add-template p-1 d-flex justify-content-end w-100">
          <Button.Ripple
            color="primary"
            onClick={() => setFieldData(SET_COST_FIELD, 'params', {...params, isCost: true})}
          >
            Затраты
          </Button.Ripple>
        </div>
      </div>
    </>
  )
}

const mapStateToProps = state => ({
  templates: state.eventCosts.templates,
  params: state.eventCosts.params,
});
export default connect(mapStateToProps, {getTemplates, setFieldData, getTypes, storeTemplate})(TabCosts)
